import React, { useState } from 'react';
import {
  Form, Input, Button, Select
} from 'antd';

const { Option } = Select;

function Filter({ filter, clearFilter, signAllRead }) {
  const [level, setLevel] = useState('all');
  const [status, setStatus] = useState('all');
  const [detail, setDetail] = useState('');
  const [type, setType] = useState('all');

  return (
    <div style={{ margin: '10px 0' }}>
      <Form layout="inline">
        <Form.Item label="等级">
          <Select
            defaultValue="all"
            value={level}
            style={{ width: 120 }}
            onChange={(val) => {
              setLevel(val);
            }}
          >
            <Option value="all">全部</Option>
            <Option value="EXTREME_URGENT">极度紧急</Option>
            <Option value="URGENT">紧急</Option>
            <Option value="LIGHT">轻微</Option>
            <Option value="NORMAL">一般</Option>
          </Select>
        </Form.Item>
        <Form.Item label="状态">
          <Select
            defaultValue="all"
            value={status}
            style={{ width: 120 }}
            onChange={(val) => {
              setStatus(val);
            }}
          >
            <Option value="all">全部</Option>
            <Option value="true">已读</Option>
            <Option value="false">未读</Option>
          </Select>
        </Form.Item>
        <Form.Item label="类型">
          <Select
            defaultValue="all"
            value={type}
            style={{ width: 120 }}
            onChange={(val) => {
              setType(val);
            }}
          >
            <Option value="all">全部</Option>
            <Option value="DOCKATE">网关</Option>
            <Option value="SERVICE">服务</Option>
            <Option value="SERVER">服务器</Option>
          </Select>
        </Form.Item>
        <Form.Item label="备注">
          <Input
            placeholder="备注信息"
            value={detail}
            onChange={(val) => {
              setDetail(val.target.value);
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              filter({
                level, type, status, detail
              });
            }}
          >
            过滤
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              setDetail('');
              setLevel('all');
              setType('all');
              setStatus('all');
              clearFilter();
            }}
          >
            清理过滤
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={signAllRead}
          >
            全部标记为已读
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Filter;